<template>
	<view class="login-container">
		<view class="login-switch">
			<text :class="{ 'active': loginMethod === 'password' }" @tap="toggleLogin('password')">密码登录</text>
			<text :class="{ 'active': loginMethod === 'sms' }" @tap="toggleLogin('sms')">邮箱登录</text>
		</view>
		<view class="login-inputs">
			<view v-if="loginMethod === 'password'">

				<input type="text" placeholder="请输入用户名" v-model="username">
				<input type="password" password placeholder="请输入密码" v-model="password">
			</view>
			<view v-else-if="loginMethod === 'sms'">
				<input type="tel" placeholder="请输入邮箱" v-model="phoneNumber">
				<view class="login-send">
					<input type="text" class="login-send-left" placeholder="请输入验证码" v-model="verificationCode">
					<button @tap="sendVerificationCode" :disabled="isSending">发送验证码</button>
					<uni-countdown :showDay="false" :showHour="false" :showMinute="false" :second="60"
						:start="isStart"></uni-countdown>
				</view>

			</view>
		</view>
		<button class="login-button" @tap="handleLogin">{{ loginMethod === 'password' ? '密码登录' : '短信登录' }}</button>

		<button @tap="wxLogin">微信登录</button>

	</view>
</template>

<script setup lang="ts">
	import { useMemberStore } from '@/stores';
	import { getUserInfo, loginByWechat, sendEmail, loginByPhone } from '@/services/login';
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';


	// State and methods for login
	const loginMethod = ref<'password' | 'sms'>('password');
	const username = ref('');
	const password = ref('');
	const phoneNumber = ref('');
	const verificationCode = ref('');
	const isSending = ref(false);
	const isStart = ref(false)

	const memberStore = useMemberStore();



	// Toggle between password and SMS login
	const toggleLogin = (method : 'password' | 'sms') => {
		loginMethod.value = method;
	};

	// Handle login logic based on selected method
	const handleLogin = () => {
		if (loginMethod.value === 'password') {
			// Implement password login logic
		} else if (loginMethod.value === 'sms') {
			loginByPhone(phoneNumber.value, verificationCode.value).then(res => {
				memberStore.setProfile(res.data);
				uni.showToast({ icon: 'none', title: '登录成功~' })
				uni.navigateBack();

			});
		}
	};

	// Send SMS verification code
	const sendVerificationCode = () => {
		isStart.value = true;
		isSending.value = true;
		setTimeout(() => {
			isSending.value = false;
			sendEmail(phoneNumber.value)
			// Simulated success message or further logic
		}, 2000); // Simulated 2 seconds delay for demonstration
	};
	const wxLogin = () => {
		uni.authorize({
			scope: 'scope.userInfo',
			success() {
				uni.getUserInfo({
					desc: '登录的数据',
					success(ures) {
						uni.login({
							provider: 'weixin', // 使用微信登录
							success(lres) {
								const params = {
									code: lres.code
								};
								loginByWechat(params.code).then(res => {
									memberStore.setProfile(res.data);
									uni.showToast({ icon: 'none', title: '登录成功~' })
									uni.navigateBack();

								});
							}
						});
					}
				});
			}
		});
	}
</script>

<style scoped>
	.login-container {
		padding: 20px;
		background-color: #f0f0f0;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		width: 300px;
		margin: 0 auto;
	}

	.login-switch {
		display: flex;
		justify-content: space-around;
		margin-bottom: 20px;
	}

	.login-send-left {
		width: 80px;
	}

	.login-send {
		display: flex;
		height: 50px;
	}

	.login-switch text {
		font-size: 16px;
		cursor: pointer;
		padding-bottom: 8px;
		border-bottom: 2px solid transparent;
	}

	.login-switch text.active {
		border-color: #333;
	}

	.login-inputs input {
		width: 100%;
		margin-bottom: 10px;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 14px;
		background-color: white;
	}


	.login-inputs button:disabled {
		background-color: #ccc;
		cursor: not-allowed;
	}

	input,
	button {
		height: 40px;
		border: none !important;
	}

	.login-inputs button {
		font-size: 14px;
		width: 100px;

	}

	.login-button {
		width: 100%;
		height: 40px;
		background-color: #00aaff;
		color: white;
		border: none;
		border-radius: 4px;
		font-size: 14px;
		cursor: pointer;
	}

	.login-button:hover {
		background-color: #555;
	}
</style>